<template>
	<view class="h-full">
		<view class="boxSty">
				<div>
					<!-- <view class="flex between" style="align-items: flex-end; position: relative;">
						<u-swiper :list="swiperList" style="position: relative;z-index: 2;" class="w-full swiperSty" height="750"></u-swiper>
						<view class="watchSty">
							<image src="../../../static/icon/seeEyeIcon.png" mode="widthFix" class="w-20 h-12 ml-12"></image>
							<p class="ml-10">{{ allInfo.num }}</p>
						</view>
					</view> -->
					<view class="w100p flex-item oh" style="position: relative;z-index: 1">
						<scroll-view scroll-y class="w100p scroll-Y">
							<view class="w100p swiper_video car_video">
								<swiper class="w100p swiper" :disable-touch="stopTouchMove" :current="swiperCurrent" @change="swiperChange"
									circular :indicator-dots="true" indicator-color="#9B969A" indicator-active-color="#fff" :circular="true">
									
									<swiper-item v-for="item in swiperListVideo">
										<view class="pr video_wrap" >
											<video id="myVideo" class="w100p  palyxxx" :src="item" :show-center-play-btn="true"
												object-fit="cover" play-btn-position="center" :controls="true" :autoplay="true" muted
												:poster="item">
											</video>
											<view class="video-wrapxx">
												<image :src="swiperList[0]" mode="aspectFill"></image>
											</view>
											<cover-view v-show="isShow" class="pa play_wrap" @click="playsHeader(item)">
												<view class="icon_wrap">
													<u-icon name="play-right-fill" color="#fff" size="46"></u-icon>
												</view>
											</cover-view>
										</view>
									</swiper-item>
									<swiper-item v-for="item in swiperList" :key="item">
										<image class="w100p img"  :src="item" mode="aspectFill"></image>
									</swiper-item>
								</swiper>
							</view>
							<!-- <view class="pt_swiper"></view> -->
							<!-- <view :style="{ marginTop: +statusBarHeight + 44 + 280 + 'px' }"></view> -->
						<view :style="[getTopHeight()]"></view>
						</scroll-view>
					</view>
					<!-- <image
						:src="IMAGE_URL + (allInfo.images && allInfo.images.length > 0 && allInfo.images[0])"
						mode="aspectFill"
						class="w-full"
						style="position: relative;z-index: 2;"
					>
					</image> -->
					<div :style="`position: fixed;z-index: 150;top: ${statusBarHeight + 15}px;`" class="flex between w-full">
						<div class="back center" @click="back"> 
							<image src="../../../static/icon/back.png" mode="" class="w-20 h-30"></image>
						</div>
						<div class="flex-start operateBox">
							<view class="operateBg" @click="goToZan">
								<image v-if="zanFlag" src="../../../static/icon/thumbs-uped.png" mode="" class="w-40 h-35"></image>
								<image v-else src="../../../static/icon/thumbs-up.png" mode="" class="w-40 h-35"></image>
							</view>
							<view class="operateBg ml-25" @click="getGuanZhuCollect">
								<image v-if="collectFlag" src="../../../static/icon/collected.png" mode="" class="w-40 h-35"></image>
								<image v-else src="../../../static/icon/collect.png" mode="" class="w-40 h-35"></image>
							</view>
						</div>
					</div>
				</div>
		</view>
		<view class=" bg-white pl-34 pr-34  pb-40" style="border-radius: 26rpx 26rpx 0 0 ;position: relative;z-index: 10">
			<view class="flex-start ">
				<view class="" v-for="(item ,index) in infoTitle" class="mr-50 commonTitle" :class="{activeTitle: current == index}" @click="changeTitle(index)">
					{{item}}
				</view>
			</view>
			<view v-if="current == 0" class="pb-150">
				<p class="text-010 fz30 mt-40 font-bold">{{ allInfo[plang('title')] }}</p>
				<p class="fz28 text-333 mt-24">{{ allInfo[plang('content')] }}</p>
			</view>
			<!-- <view v-if="current == 1" class="">
				<p class="fz28 text-333 mt-24" style="background-color: #F7F7F7;min-height: 300rpx;">{{  }}</p>
			</view>
			<view v-if="current == 2" class="line-h50">
				<p class="fz24 text-333 mt-24">千艺团队拥有丰富的项目经验，以企业形象设计与品牌创意为主，并结合企业与品牌的商业价值，服务国内多行业类型的品牌，合理的收费，有效协助品牌整体规划，我们通过严谨的思维与用心的执行成功.</p>
			</view> -->
			<view v-if="current == 1" class="mt-20  pb-70">
				<view class="ml-24 mr-24 flex-start mt-50" v-for="item in commontList">
					<!-- 一级 -->
					<image :src="getImageUrl(get(item, 'member.avatar'))" mode="aspectFill" class="w-65 h-65"></image>
					<view class="ml-24">
						<!-- 一级 -->
						<span  class="fz24" style="color: #ADADAD;" v-if="langR == 'zh'">{{get(item, 'member.username')}}</span>
						<span  class="fz24" style="color: #ADADAD;" v-else>{{get(item, 'member.username_ru')}}</span>
						<span v-if="allInfo.user_id == item.member_id" class="w-60 h-30 ml-10" style="display: inline-block;background-color: #FFEDF0;color: #F53F3F;border-radius: 500rpx;line-height: 30rpx;text-align: center;font-size: 17rpx;">{{$t('作者')}}</span>
						<p class="fz24 text-333 mt-15">{{item[plang('content')]}}</p>
						<view class="mt-15">
							<span class="fz20" style="color: #ADADAD;">{{item.add_time}}</span>
							<span class="fz20 ml-20" style="color: #ADADAD;" @click="replaySec(item, 2, '')" v-if="item.type != 3">{{$t('回复')}}</span>
							<span v-if="allInfo.user_id == userId || userId == item.member_id" class="fz20 ml-20" style="color: #ADADAD;" @click="delReply(item)">{{$t('删除')}}</span>
						</view>
						<!-- 二级 -->
						<view class="mt-20" v-for="itemSecond in item.comment">
							<view class="flex-start">
								<image :src="getImageUrl(get(itemSecond, 'member.avatar'))" mode="aspectFill" class="w-40 h-40 vam"></image>
								<view class="ml-24">
									<span  class="fz24" style="color: #ADADAD;" v-if="langR == 'zh'">{{get(itemSecond, 'member.username')}}</span>
									<span  class="fz24" style="color: #ADADAD;" v-else>{{get(itemSecond, 'member.username_ru')}}</span>
									<span v-if="allInfo.user_id == itemSecond.member_id" class="w-60 h-30 ml-10" style="display: inline-block;background-color: #FFEDF0;color: #F53F3F;border-radius: 500rpx;line-height: 30rpx;text-align: center;font-size: 17rpx;">{{$t('作者')}}</span>
									<p class="fz24 text-333 mt-15">{{itemSecond[plang('content')]}}</p>
									<view class="mt-15">
										<span class="fz20" style="color: #ADADAD;">{{itemSecond.add_time}}</span>
										<span class="fz20 ml-20" style="color: #ADADAD;" @click="replaySec(itemSecond ,3, item.id)" v-if="itemSecond.type != 3">{{$t('回复')}}</span>
										<span v-if="allInfo.user_id == userId || userId == itemSecond.member_id" class="fz20 ml-20" style="color: #ADADAD;" @click="delReply(itemSecond)">{{$t('删除')}}</span>
									</view>
								</view>
							</view>
							<!-- 三级 和二级摆放在同一级 -->
							<view class="mt-20 flex-start" v-for="itemThird in itemSecond.comment" style="padding-left: 30rpx;">
								<image :src="getImageUrl(get(itemThird, 'member.avatar'))" mode="aspectFill" class="w-40 h-40 vam"></image>
								<view class="ml-24">
									<span  class="fz24" style="color: #ADADAD;" v-if="langR == 'zh'">{{get(itemThird, 'member.username')}}</span>
									<span  class="fz24" style="color: #ADADAD;" v-else>{{get(itemThird, 'member.username_ru')}}</span>
									<span v-if="allInfo.user_id == itemThird.member_id" class="w-60 h-30 ml-10" style="display: inline-block;background-color: #FFEDF0;color: #F53F3F;border-radius: 500rpx;line-height: 30rpx;text-align: center;font-size: 17rpx;">{{$t('作者')}}</span>
									<p class="fz24 text-333 mt-15">{{itemThird[plang('content')]}}</p>
									<view class="mt-15">
										<span class="fz20" style="color: #ADADAD;">{{itemThird.add_time}}</span>
										<span class="fz20 ml-20" style="color: #ADADAD;" @click="replaySec(itemThird, 3, itemSecond.id)" v-if="itemThird.type != 3">{{$t('回复')}}</span>
										<span v-if="allInfo.user_id == userId || userId == itemThird.member_id" class="fz20 ml-20" style="color: #ADADAD;" @click="delReply(itemThird)">{{$t('删除')}}</span>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view> 
		
		<view v-if="replayFlag" class="replaySty">
			<p class="ml-20" @click="replayFlag = false">❌</p>
			<p class="ml-20">{{$t('回复')}}：{{replayUser}}</p>
			
		</view>
		<view class="footer_btn4">
			
			<u-input
				v-model="valueComment"
				type="text" :border="false"
				:height="60" :auto-height="true"
				class="inputSty"
				:placeholder="$t('真实发声,言之有物')"
				@confirm="sendComment(valueComment)"
			/>
				<view class="ml-20 flex center" @click="goToZan">
					<image v-if="zanFlag" src="../../../static/icon/thumbs-uped.png" mode="" class="w-40 h-35"></image>
					<image v-else src="../../../static/icon/goodIcon.png" mode="widthFix" class="w-40 h-35"></image>
					<span class="fz24 text-3b3 ml-5">{{ zan_count }}</span>
				</view>
				<view class="ml-20 flex center" @click="getGuanZhuCollect">
					<image v-if="collectFlag" src="../../../static/icon/collected.png" mode="" class="w-40 h-35"></image>
					<image v-else src="../../../static/icon/collectIcon.png" mode="widthFix" class="w-40 h-35"></image>
					<span class="fz24 text-3b3 ml-5">{{guanzhu_num}}</span>
				</view>
				<view class="ml-20 mr-20">
					<image src="../../../static/icon/commentIcon.png" mode="widthFix" class="w-45 vam"></image>
					<span class="fz24 text-3b3 ml-5">{{comment_count}}</span>
				</view>
		</view>
		<!-- 播放视频 -->
		<uni-popup ref="popupVideo" type="center" background-color="#000" mask-background-color="#000" class="popvexxx">
			<view class="wrapper-video" >
				<video id="mainVideo" :src="playVideo" :show-center-play-btn="true" object-fit="cover"
					play-btn-position="center" :controls="true" :autoplay="true" class="video-main" :show-fullscreen-btn="false">
				</video>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { payScore, lookatZan, operateZan, getGuanZhu, getIsGuanZhu, userGroup, watchComment, delComment, sendComment, getGuanZhuNumber } from '@/api/basic'
	export default {
		data() {
			return {
				productFlag: true,
				showUserInfo: false,
				zanFlag: false,
				collectFlag: false,
				groupId: '',
				commontList: [],
				isShow: true, // 播放按钮是否显示
				stopTouchMove: false, // 轮播是否禁止滑动
				isEllipsis: true, // 是否溢出隐藏
				closeVideo: true,
				statusBarHeight: uni.getStorageSync("statusBarHeight"),
				swiperCurrent: 0,
				valueComment: '',
				replayFlag:false,
				typeKey: '',
				itemInfo: {},
				userId: uni.getStorageSync("user_id"),
				replayUser: '',
				current: 0,
				topId: '',
				allInfo: {},
				IMAGE_URL: 'https://gluz-oss.oss-cn-beijing.aliyuncs.com/',
				swiperList: [],
				swiperListVideo: [],
				infoTitle: [this.$t('服务内容'), this.$t('用户评论')],
				zan_count: 0,
				comment_count: 0,
				guanzhu_num: 0,
				playVideo:'',
			}
		},
		onLoad(options) {
			// this.allInfo = JSON.parse(options.item)
			this.allInfo = uni.getStorageSync('exposureDetail')
			if (this.allInfo.images.length > 0) {
				this.allInfo.images.map(item => {
					this.swiperList.push(this.getImageUrl(item))
				})
			}
			if (this.allInfo.videos && this.allInfo.videos.length > 0) {
				this.swiperListVideo.push(this.getImageUrl(this.allInfo.videos))
				this.playVideo = this.getImageUrl(this.allInfo.videos[0])
			}
			window.onNativeHide  =()=>{
				uni.removeStorageSync("exposureDetail")
			}
				console.log('this.swiperListVideo', this.swiperListVideo)
			// if (options.item) {
			// 	this.allInfo = JSON.parse(options.item)
			// 	if (this.allInfo.images.length > 0) {
			// 		this.allInfo.images.map(item => {
			// 			this.swiperList.push(this.getImageUrl(item))
			// 		})
			// 	}
			// 	if (this.allInfo.videos && this.allInfo.videos.length > 0) {
			// 		this.swiperListVideo.push(this.getImageUrl(this.allInfo.videos))
			// 	}
			// 	console.log('this.swiperListVideo', this.swiperListVideo)
			// }
			console.log('88999', this.allInfo)
			this.jjVideoCtx = uni.createVideoContext('jjVideo');
			this.videos = uni.createVideoContext('myVideo');
		  },
		  mounted() {
				this.userGroup()
		  		this.getIsGuanZhu()
				this.lookatZan()
				this.getGuanZhuNumber()
				this.watchComment()
		  },
		methods: {
			getTopHeight() {
				 return {marginTop: `calc(780rpx)`}
			},
			swiperChange(e) {
				this.swiperCurrent = e.detail.current;
			},
			// 播放头部视频
			playsHeader(video) {
				// 判断安卓
				const systemInfo = uni.getSystemInfoSync();
				// 判断是否为 Android 系统
				if (systemInfo.platform === 'android') {
					this.playVideo = video;
					this.$refs.popupVideo.open()
					return;
				}
				this.videos.requestFullScreen();
				this.$nextTick(() => {
					this.videos.play();
				})
			},
			// 视频中间播放按钮
			plays(video) {
				// 判断安卓
				const systemInfo = uni.getSystemInfoSync();
				// 判断是否为 Android 系统
				if (systemInfo.platform === 'android') {
					this.playVideo = video;
					this.$refs.popupVideo.open()
					return;
				}
				this.$nextTick(() => {
					this.jjVideoCtx.requestFullScreen();
				})
			},
			back() {
				uni.navigateBack()
			},
			userGroup() {
				userGroup({
					user_id: uni.getStorageSync("user_id"),
					type: 1,
				}).then(res => {
					res.data.data.map(item => {
						if(item.title == '未分组') {
							this.groupId = item.id
						}
					})
				})
			},
			// 查看是否关注和收藏
			getIsGuanZhu() {
				// 查看是否收藏
				getIsGuanZhu({
					user_id: uni.getStorageSync("user_id"),
					guanzhu_id: this.allInfo.id,
					type: 2,
					release_type: 'exposure'
				}).then(res => {
					if(res.data.data == 1) {
						this.collectFlag = false
					} else {
						this.collectFlag = true
					}
				})
			},
			// 收藏操作
			getGuanZhuCollect() {
				getGuanZhu({
					user_id: uni.getStorageSync("user_id"),
					guanzhu_id: this.allInfo.id,
					type: 2,
					release_type: 'exposure',
					group_id: this.groupId
				}).then(res => {
					this.getIsGuanZhu()
					this.getGuanZhuNumber()
				})
			},
			getGuanZhuNumber() {
				getGuanZhuNumber({
					user_id: uni.getStorageSync("user_id"),
					guanzhu_id: this.allInfo.id,
					type: 2,
					release_type: 'exposure'
				}).then(res => {
					this.guanzhu_num = res.data.data
				})
			},
			// 查看是否点赞
			lookatZan() {
				lookatZan({
					user_id: uni.getStorageSync("user_id"),
					zan_id: this.allInfo.id,
					type: 2,
					release_type: 'exposure'
				}).then(res => {
					console.log('888888', res)
					this.zan_count = res.data.data.count
					if(res.data.data.data == 400) {
						this.zanFlag = false
					} else {
						this.zanFlag = true
					}
				})
			},
			// 进行点赞
			goToZan() {
				operateZan({
					user_id: uni.getStorageSync("user_id"),
					zan_id: this.allInfo.id,
					type: 2,
					release_type: 'exposure'
				}).then(res => {
					if(res.data.data == 200) {
						this.lookatZan()
					}
				})
			},
			successFun() {
				uni.navigateTo({
					url: '/pages/tabbar/newUser/Mall/mallSuccess'
				})
			},
			changeTitle(index) {
				if(index == 1) {
					this.watchComment()
				}
				this.current = index
			},
			// 查看评论
			watchComment() {
				uni.showLoading({
					title: this.$t('加载中')
				});
				watchComment({
					release_id: this.allInfo.id,
					member_id: uni.getStorageSync("user_id"),
					release_type: 'exposure'
				}).then(res => {
					if (res.data.data.length == 0) {
						this.nomore = true
					} else {
						this.commontList = res.data.data.data
						this.comment_count = res.data.data.comment_count || 0
					}
					uni.hideLoading()
				})
			},
			sendComment(info) {
				if (info == '') {
					uni.$u.toast(this.$t('请输入评论内容'))
					return
				}
				uni.showLoading({
					title: '发送中'
				});
				sendComment({
					release_id: this.allInfo.id,
					member_id: uni.getStorageSync("user_id"),
					release_type: 'exposure',
					content: info,
					type: this.typeKey || 1,
					one_comment_id: this.topId || this.itemInfo.id || 0,
					comment_id: this.itemInfo.id || 0
				}).then(res => {
					if(res.data.data == 200) {
						uni.showToast({
							title:'发布成功'
						})
					}
					this.topId = '';
					this.itemInfo.id = '';
					this.typeKey = '';
					this.replayFlag = false
					this.valueComment = ''
					this.watchComment()
					uni.hideLoading()
				})
			},
			replaySec(item, key, topId) {
				this.replayUser = item.member[this.plang('username')]
				console.log('9990000', this.replayUser)
				this.itemInfo = item
				this.typeKey = key
				this.topId = topId
				this.replayFlag = true
			},
			delReply(delParams) {
				uni.showLoading({
					title: this.$t('删除中')
				});
				delComment({
					id: delParams.id,
					member_id: uni.getStorageSync("user_id")
				}).then(res => {
					if(res.data.data == 200) {
						uni.showToast({
							title:this.$t('删除成功')
						})
					}
					this.watchComment()
					uni.hideLoading()
				})
				
			}
		}
	}
</script>

<style lang="scss">
	@import "./shopDetail.scss";
	@import '@/assets/appScss.scss';
	page {
		// background-color: #F6F7FB;
	}
	.back {
		// position: absolute;
		width: 70rpx;
		height: 70rpx;
		// top: 50rpx;
	}
	.titleSty {
		color: #262728;
		font-family: "PingFang SC";
		font-size: 28rpx;
		font-style: normal;
		font-weight: 600;
		// padding-top: 34rpx;
		margin-left: 14rpx;
	}
	.formSty {
		padding-bottom: 200rpx;
		/deep/ .u-form-item__body {
			padding: 0;
		}
	}
	.contentBg {
		background-color: #fff;
		padding: 0 24rpx;
		// margin-left: 24rpx;
		// margin-right: 24rpx;
		border-radius: 18px;
		padding-bottom: 35rpx;
		/deep/ .u-form-item__body__right__message {
			margin-left: 0 !important;
		}
		/deep/ .u-icon__icon {
			font-size: 52rpx !important;
		}
		/deep/ .u-border-bottom{
			position: inherit;
		}
		/deep/ .u-add-wrap {
			// display: none !important;
			color: #D9D9D9;
			font-size: 20rpx;
		}
		/deep/ .u-add-tips {
			display: none !important;
		}
	}
	.boxSty {
		width: 100%;
		// height: 850rpx;
		position: relative;
		// height: 600rpx;
		// background-image: url('../../../static/images/user/newUI/detsilIMage.png');
		// background-size: 100% 100%;
		// background-repeat: no-repeat;
		.watchSty {
			// width: 100rpx;
			height: 35rpx;
			border-radius: 60rpx;
			background-color: rgba(14,14,14, 0.68);
			display: flex;
			justify-content: flex-start;
			align-items: center;
			color: #fff;
			font-size: 20rpx;
			// margin-right: 24rpx;
			// margin-bottom: 12rpx;
			bottom: 10rpx;
			right: 10rpx;
			position: absolute;
			z-index: 20;
			padding-right: 14rpx;
		}
			.swiperSty {
				/deep/ .u-swiper-image div {
					background-size: contain !important;
				}	
			}
		/deep/ .u-swiper-indicator {
			justify-content: flex-start !important; 
		}
		.operateBox {
			// position: absolute; 
			// right: 20rpx;
			// top: 50rpx;
			margin-right:30rpx;
		}
		.operateBg {
			width: 56rpx;
			height: 56rpx;
			background-color: #0E0E0E;
			opacity: 0.6;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		/deep/ uni-swiper .uni-swiper-dots-horizontal {
			bottom: 0 !important;
			left: 10% !important;
		}
	}
	.numberSty {
		color: #FF5A00;
		font-size: 48rpx;
		font-weight: 600;
		margin-top: 34rpx;
	}
	.transformSty {
		width: 122rpx;
		height: 46rpx;
		background-color: #F1F6FF;
		text-align: center;
		font-size: 26rpx;
		line-height: 46rpx;
		color: #7A929B;
		margin-top: 24rpx;
	}
	.replaySty {
		position: fixed;
		left:0;
		bottom: 120rpx;
		right: 0;
		color: #adadad;
		display: flex;
		justify-content: flex-start;
		z-index: 10;
		background-color: #DEE1EF;
	}
	.footer_btn4{
		position: fixed;
		height: 120rpx;
		left:0;
		bottom: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		background: #fff;
		z-index: 20;
		.inputSty {
			width: 30%;
			border-radius: 30rpx;
			background-color: #F6F6F6;
			text-indent: 20rpx;
			margin-left: 15rpx;
		}
	}
	.busiBox {
		width: 121rpx;
		height: 28rpx;
		margin-top: 14rpx;
		position: relative;
		.iconSty {
			position: absolute;
			left: 6rpx;
			top: 3rpx;
		}
	}
	.followBox {
		border: 1rpx solid #000;
		border-radius: 500rpx;
		width: 134rpx;
		height: 52rpx;
		color: #333;
		font-size: 24rpx;
		font-weight: 600;
		text-align: center;
		line-height: 52rpx;
	}
	.callPhoneSty {
		background: linear-gradient(90deg, #FF7000 0%, #FFA245 100%);
		box-shadow: 0px 4px 13.8px 0px #DEE1EF;
		box-shadow: -2px -3px 9.9px 0px #FFBE7C inset;
		box-shadow: -4px 4px 6px 0px #FFCB9775 inset;
		width: 45%;
		height: 68rpx;
		line-height: 68rpx;
		font-size: 26rpx;
		font-weight: 600;
		color: #fff;
		text-align: center;
		border-radius: 500rpx;
	}
	.inlineBox {
		background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
		box-shadow: 0px 4px 13.8px 0px #DEE1EF;
		box-shadow: -2px -6px 9.9px 0px #71D0FF inset;
		box-shadow: -4px 5px 6.5px 0px #C8FBFF75 inset;
		width: 45%;
		height: 68rpx;
		line-height: 68rpx;
		font-size: 26rpx;
		font-weight: 600;
		color: #fff;
		text-align: center;
		border-radius: 500rpx;
	}
	.commonTitle {
		font-size: 26rpx;
		color: #535353;
		height: 60rpx;
	}
	.activeTitle {
		font-size: 32rpx;
		color: #0E0E0E;
		font-weight: 600;
		border-bottom: 6rpx solid #278AFF;
	}
</style>
